<template>
  <div class="getuser overflow-scroll">
    <div class="user f-d-c f-j-a-c">
      <div class="user f-a-c f-j-a-c" style="align-items: flex-end">
        <!-- <img
          :src="
            userInfo.avatar && types == 1 ? userInfo.avatar : oterinf.avatar
          "
          alt=""
        />
        <svg-icon
          class="svgxinbiao"
          name="db"
          style="width: 14px; height: 14px"
          v-if="userInfo.staus == 1"
        ></svg-icon> -->

        <userAvatar
          :divWidth="96"
          :imgWidth="90"
          :dvWidht="24"
          :userImgs="
            types == 1
              ? userInfo
                ? userInfo.user_avatar
                : userInfo.avatar
              : oterinf.avatar
          "
          :showDv="types == 1 ? userInfo.staus == 1 : oterinf.staus == 1"
        ></userAvatar>
      </div>
      <span>{{
        types == 1
          ? userInfo
            ? userInfo.user_name
            : userInfo.name
          : oterinf.name
      }}</span>
      <div  class="f-a-c" style="margin-bottom: 20px;">
        <!-- <span>{{ datalist.userName }}</span> -->
        <svg-icon
          name="icon-dav"
          style="width: 20px; height: 20px; margin-left: 5px"
          v-if="userInfo.miniData.is_authentication == 1"
        ></svg-icon>
        <svg-icon
          name="icon-guanfang"
          style="width: 20px; height: 20px; margin-left: 5px; margin-right: 5px"
          v-if="userInfo.miniData.is_official == 1"
        ></svg-icon>
        <span class="dengjiLV"> {{ "LV" + userInfo.miniData.lv }}</span>
      </div>
      <div class="yonghuxinxi f-a-c">
        <div
          class="itme f-a-c f-j-a-c"
          v-for="(item, index) in yonhuL"
          :key="index"
        >
          <span>{{ item.num }}</span>
          <span>{{ item.title }}</span>
        </div>
      </div>
      <div class="content">
        <span
          >{{
            types == 1
              ? userInfo
                ? userInfo.user_introduce
                : userInfo.detail
              : oterinf.detail
          }}
        </span>
      </div>
    </div>
    <div class="buttonList f-a-c f-j-a-c" :class="types == 1 ? 'f-j-a-c' : ''">
      <div
        class="guanzhu click f-j-a-c"
        :class="{ quxiaoattention: oterinf.isCares == 1 }"
        v-if="types == 0"
        @click="getguanzhu()"
      >
        <span>{{ oterinf.isCares == 1 ? "取消关注" : "关注" }}</span>
      </div>
      <!-- <div class="sixing click f-j-a-c" v-if="types == 0">
        <span>私信</span>
      </div> -->
      <div class="bianji click f-j-a-c" v-if="types == 1" @click="bianji">
        <span>编辑个人资料</span>
      </div>
      <div class="feiji click f-j-a-c" @click="fuzhi">
        <svg-icon name="icon-send"></svg-icon>
      </div>
      <div class="feiji click f-j-a-c" v-if="types == 0" @click="noopen">
        <svg-icon name="icon-dian"></svg-icon>
      </div>
    </div>
    <div class="boxlist">
      <div class="list f-a-c f-j-sb-a-c">
        <div
          class="listitem f-a-c click"
          :class="{
            listactice: current == index,
            'listitem-center': index == 1,
          }"
          v-for="(item, index) in chuanzuolist"
          :key="index"
          @click="chuanzuolistClick(index)"
        >
          <svg-icon :name="item.svg1" v-if="current == index"></svg-icon>
          <svg-icon :name="item.svg" v-else></svg-icon>
          <span :class="current == index ? 'spanact' : ''"
            >{{ item.text }}

            <span v-if="index == 0">({{ item.num || 0 }})</span>
          </span>
        </div>
      </div>
    </div>
    <!-- <div class="sousuo" v-if="current == 0">
      <search></search>
    </div> -->
    <!-- <div> -->
    <div class="sousuo" v-show="current != 1">
      <div class="my-img-box">
        <Waterfall
          :userType="userType"
          :blocks="blocks"
          scrollBodySelector=".getuser"
          :isMounted="isMounted"
          @totals="totals"
          :types="types"
        >
        </Waterfall>
      </div>
    </div>
    <!-- </div> -->

    <div class="shoucan min-width" v-if="current == 1">
      <div class="addshoucan f-j-a-c click" @click="edit">
        <svg-icon name="icon-tianjia"></svg-icon>
        <span>添加收藏夹</span>
      </div>
      <div class="shoucanbox f-a-c" v-if="imgList.length">
        <div
          v-for="(items, indexs) in imgList"
          :key="indexs"
          class="shoubox click"
          @click="golist(items)"
        >
          <div class="overlay" v-if="types != 0">
            <div class="userimg f-a-c">
              <div class="gongneng f-a-c">
                <div
                  class="gognitem f-j-a-c"
                  @click.stop="shanchu(items, indexs)"
                >
                  <svg-icon name="icon-trash"></svg-icon>
                </div>
                <div
                  class="gognitem f-j-a-c"
                  @click.stop="bianjiCollect(items)"
                >
                  <svg-icon name="icon-bianji"></svg-icon>
                </div>
              </div>
            </div>
          </div>
          <div class="shoucanitem f-a-c" v-if="items.length <= 3">
            <div class="leftimg">
              <img v-if="items[0]" :src="items[0]['img0']" alt="" />
            </div>
            <div class="rightimg f-d-c">
              <div class="imgtop">
                <img v-if="items[1]" :src="items[1]['img1']" alt="" />
              </div>
              <div class="imgbottom">
                <img v-if="items[2]" :src="items[2]['img2']" alt="" />
              </div>
            </div>
          </div>
          <div class="shoucanMore" v-else>
            <div class="moreitems f-a-c">
              <div
                class="moreitem"
                v-for="(it, ind) in items.length >= 5 ? 5 : items.length"
                :key="ind"
              >
                <img :src="items[ind]['img' + ind]" alt="" />
              </div>
            </div>
          </div>
          <div class="name">
            <span> {{ collectList[indexs].collectName }}</span>
          </div>
          <div class="names">
            <span> {{ collectList[indexs].num }} 收藏</span>
          </div>
        </div>
      </div>
      <nodata v-else></nodata>
    </div>
  </div>
  <!-- 收藏夹 -->
  <collect
    @getcolletClick="getcolletClick"
    :opentype="opentype"
    :bianjiCheck="bianjiCheck"
    @opentypeclick="opentypeclick"
    :bianjiitem="bianjiitem"
    ref="collects"
  ></collect>
</template>

<script>
import { followNow } from "@/axios/community.js";

import nodata from "@/components/noData.vue";
import collect from "../components/collect.vue";
import { copyData } from "@/utils/common.js";

import Waterfall from "./waterfall.vue";
import {
  getoter,
  collectlist,
  deletecollect,
  guanzhu,
  deleteuser,
} from "@/axios/api.js";
import { Delete } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import userAvatar from "@/components/userAvatar.vue";

// import goodlist from "./goodlist.vue";
// import search from "./search.vue";
import { useRouter } from "vue-router";
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  getCurrentInstance,
  onUnmounted,
  ref,
  markRaw,
} from "vue";
import { useStore } from "vuex";
export default defineComponent({
  components: {
    collect,
    // search,
    nodata,
    // goodlist,
    Waterfall,
    userAvatar,
  },

  setup(props, { attrs, slots, emit }) {
    const isMounted = ref(false);
    const collects = ref();
    let userInfo = computed(() => {
      return store.state.minUserInfo;
    });
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    let store = useStore();
    let data = reactive({
      bianjiCheck: false,
      googlistitem: {},
      imgtou: new URL("../../../assets/image/tx@2x.png", import.meta.url),
      userType: 0,
      shoucanList: [
        {
          title: "室内模型",
        },
        {
          title: "室内模型",
        },
        {
          title: "室内模型",
        },
        {
          title: "室内模型",
        },
      ],
      favoritesType: 2,
      dialogVisible: false,
      checkcollet: false,
      imgList: [],
      blocks: [],
      current: 0,
      chuanzuolist: [
        {
          svg: "icon-chuangzuo",
          svg1: "icon-chuangzuol",
          text: "创作",
          num: 0,
        },
        {
          svg: "icon-jihe",
          svg1: "icon-jihe-yx1",
          text: "收藏",
          num: 0,
        },
        {
          svg: "icon-xihuan",
          svg1: "icon-xihuanl",
          text: "点赞",
          num: 0,
        },
      ],
      types: 0,
      phone: "",
      oterinf: {},
      opentype: false,
      collectList: [],
      bianjiitem: {}, // 编辑item
      // img2: new URL("../../../assets/gath.ico", import.meta.url),
    });

    let yonhuL = computed(() => {
      let arr = [
        {
          title: "粉丝",
          num: 0,
        },
        {
          title: "关注",
          num: 0,
        },
        {
          title: "下载",
          num: 0,
        },
      ];

      if (data.types == 0) {
        arr[2].num = data.oterinf.downNum; //总下载量
        arr[1].num = data.oterinf.guanzhu; //关注
        arr[0].num = data.oterinf.fans; //粉丝
      } else {
        arr[2].num = userInfo.value.downNum; //总下载量
        arr[1].num = userInfo.value.guanzhu; //关注
        arr[0].num = userInfo.value.fans; //粉丝
      }
      return arr;
    });

    // 修改统计数据
    let setChuanzuolist = () => {
      if (data.types == 0) {
        // data.chuanzuolist[2].num = data.oterinf.likeNum; //点赞
        // data.chuanzuolist[1].num = data.oterinf.collect; //收藏
        // data.chuanzuolist[0].num = data.oterinf.chuangzuo; //创作
      } else {
        // data.chuanzuolist[2].num = userInfo.value.likeNum; //点赞
        // data.chuanzuolist[1].num = userInfo.value.collect; //收藏
        // data.chuanzuolist[0].num = userInfo.value.chuangzuo; //创作
      }
    };

    onMounted(() => {
      store.dispatch("updateUserInfo");
      isMounted.value = true;
      data.types = router.currentRoute._value.query.id;
      data.phone = router.currentRoute._value.query.phone;

      data.userType = 1;
      if (data.types == 0) {
        getgetoter();
      }
      getcollectlist();
      // 修改统计数据
      setChuanzuolist();
    });

    // 关闭弹窗
    let opentypeclick = () => {
      data.opentype = false;
    };
    let noopen = () => {
      return ElMessage.warning("暂未开放");
    };
    // 社区关注以及取消关注
    let gofollowNow = (id) => {
      console.log(123);
      followNow({ posts_user_id: id }).then((res) => {});
    };
    //取消关注
    let quxiaoguanzhu = () => {
      deleteuser({ targetId: data.phone }).then((res) => {
        // data.datalist.map.isCares = 0;
        ElMessage.success("取消关注");
        getgetoter();
      });
    };
    // 关注
    let getguanzhu = () => {
      if (data.oterinf.miniId) {
        gofollowNow(data.oterinf.miniId);
      }
      if (data.oterinf.isCares == 1) {
        quxiaoguanzhu();
        return;
      }

      guanzhu({ targetId: data.phone })
        .then((res) => {
          ElMessage.success("关注成功");
          getgetoter();
        })
        .catch((err) => {
          ElMessage.warning(err.message);
          getgetoter();
        });
    };
    onUnmounted(() => {});
    let chuanzuolistClick = (index) => {
      if (index == 0) {
        data.userType = 1;
      } else if (index == 2) {
        data.userType = 3;
      }
      data.current = index;
    };
    // 创建回调
    let getcolletClick = () => {
      data.imgList = [];
      data.collectList = [];
      getcollectlist();
    };
    // 编辑收藏夹
    let bianjiCollect = (item) => {
      data.bianjiitem = item;
      data.opentype = true;
      data.bianjiCheck = true;
    };
    // 列表
    let getcollectlist = () => {
      // console.log(data.types);
      collectlist({
        phone: data.types == 0 ? data.phone : userInfo.value.userId || "",
      }).then((res) => {
        data.collectList = res.data;
        res.data.forEach((item, index) => {
          let newdata = [];
          let imgsdata = {};
          item.images.forEach((ites, indx) => {
            imgsdata["img" + indx] = ites;
            imgsdata.id = item.id;
            imgsdata.collectName = item.collectName;
            imgsdata.detail = item.detail;
            newdata.push(imgsdata);
          });
          data.imgList.push(newdata);
        });
        // console.log(data.imgList);
        // data.imgList = res.data;
        // if (!res.data.length) {
        //   data.checkcollet = true;
        // }
      });
    };
    // 删除收藏夹
    let shanchu = (items, indexs) => {
      ElMessageBox.confirm("是否删除收藏夹", "提示", {
        type: "warning",
        icon: markRaw(Delete),
      }).then((res) => {
        deletecollect({ id: data.collectList[indexs].id })
          .then((res) => {
            ElMessage.success("删除成功");
            data.imgList = [];
            data.collectList = [];
            getcollectlist();
          })
          .catch((err) => {
            ElMessage.warning(err.message);
          });
      });
    };
    // 收藏夹列表
    let golist = (item) => {
      let routeData = router.resolve({
        path: "/collectlist",
        query: { collectlistid: item[0].id, id: data.types, phone: data.phone },
      });
      window.open(routeData.href, "_blank");

      // router.push({
      //   path: "/collectlist",
      //   query: { collectlistid: item[0].id, id: data.types, phone: data.phone },
      // });
    };
    // 编辑个人资料
    let edit = () => {
      data.opentype = true;
    };
    // 分享
    let fuzhi = () => {
      copyData(window.location.href);
    };
    let close = () => {
      data.dialogVisible = false;
    };

    // 创作总数
    let totals = (val) => {
      data.chuanzuolist[0].num = val;
      // data.yonhuL[0].num = val;
    };

    let bianji = () => {
      router.push("/accoutSetting");
    };
    let getgetoter = () => {
      getoter({
        phone: data.phone.toString(),
      }).then((res) => {
        data.oterinf = res.data;
        setChuanzuolist();
        // data.yonhuL[1].num = res.data.fans;
      });
    };
    return {
      gofollowNow,
      yonhuL,
      noopen,
      quxiaoguanzhu,
      golist,
      fuzhi,
      getguanzhu,
      collects,
      opentypeclick,
      bianjiCollect,
      getcolletClick,
      shanchu,
      getcollectlist,
      getoter,
      bianji,
      userInfo,
      totals,
      close,
      edit,
      isMounted,
      chuanzuolistClick,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
.dengjiLV {
  background-color: #a1efc1;
  font-size: 14px;
  color: #fff;
  padding: 0 5px;
  border-radius: 5px;
}
.name {
  margin: 10px 0 6px 0;
  > span {
    font-size: 14px;
    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
    font-weight: 700;
    color: #000000;
  }
}
.names {
  margin: 10px 0 6px 0;
  > span {
    font-size: 14px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #656f79;
  }
}
.my-img-box {
  width: 100%;
  // height: 100%; /* 父元素一定要指定高度 */
  // overflow-y: scroll; /* 一定要制定父元素超出滚动 */
}
.my-img-box::-webkit-scrollbar {
  display: none;
}
.addshoucan {
  margin-top: 20px;
  width: 106px;
  height: 40px;
  background: #f3f4f5;
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  > span {
    margin-left: 4px;
    font-size: 14px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #000000;
  }
}
.bianji {
  width: 106px;
  height: 40px;
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  border: 1px solid #ececec;
  > span {
    font-size: 14px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #000000;
  }
}
.shoucan {
  .shoucanbox {
    margin: 0 auto;
    flex-wrap: wrap;
  }

  .shoucanitem {
    position: relative;
    // margin-top: 30px;
    margin-right: 17px;
    border-radius: 20px;
    height: 200px;
    width: 290px;
    background-color: #f3f4f5;

    .leftimg {
      border-radius: 20px 0 0 20px;
      width: 50%;
      height: 100%;
      background-color: #f3f4f5;
      > img {
        object-fit: cover;

        border-radius: 20px 0 0 20px;
        width: 100%;
        height: 100%;
      }
    }
    .rightimg {
      width: 50%;
      height: 100%;
    }
    .imgtop {
      margin: 0 0 0 2px;
      border-radius: 0 20px 0 0;

      width: 100%;
      height: 50%;
      background-color: #f3f4f5;
      > img {
        border-radius: 0 20px 0 0;
        object-fit: cover;
        width: 100%;
        height: 100%;
      }
    }
    .imgbottom {
      margin: 2px 0 0 2px;
      border-radius: 0 0 20px 0;

      width: 100%;
      height: 50%;
      background-color: #f3f4f5;
      > img {
        border-radius: 0 0 20px 0;
        object-fit: cover;

        width: 100%;
        height: 100%;
      }
    }
  }

  .shoucanMore {
    position: relative;
    margin-right: 17px;
    border-radius: 20px;
    width: 100%;
    height: 100%;
    background-color: #f3f4f5;
    overflow: hidden;
    .moreitems {
      width: 140px;
      height: 100%;
      .moreitem {
        width: 140px;
        height: 100%;
      }
      > div {
        > img {
          &:first-child {
            border-radius: 20px 0 0 20px;
          }
          width: 100%;
          height: 100%;
        }
        &:first-child {
          position: absolute;
          left: 0;
          z-index: 10;
        }
        &:nth-child(2) {
          position: absolute;
          left: 43px;
          z-index: 9;
        }

        &:nth-child(3) {
          position: absolute;
          left: 78px;
          z-index: 8;
        }
        &:nth-child(4) {
          position: absolute;
          left: 113px;
          z-index: 7;
        }
        &:nth-child(5) {
          position: absolute;
          left: 150px;
          z-index: 6;
        }
      }
    }
  }
  .overlay {
    z-index: 10;
    opacity: 0;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    .userimg {
      padding: 10px 0;
      width: 100%;
      position: absolute;
      bottom: 0;
      justify-content: flex-end;
      > img {
        margin-left: 10px;
        border-radius: 50%;
        width: 30px;
        height: 30px;
      }
      .gongneng {
        justify-content: flex-end;
        .gognitem {
          cursor: pointer;
          margin-right: 10px;
          width: 30px;
          height: 30px;
          background: rgba(255, 255, 255, 0.9);
          border-radius: 8px 8px 8px 8px;
          > img {
            width: 16px;
            height: 16px;
          }
          &:active {
            opacity: 0.7;
          }
        }
      }
    }
  }
}
.shoubox {
  position: relative;
  margin-top: 30px;
  margin-right: 20px;
  height: 200px;
  width: 290px;
}

.shoubox:hover .overlay {
  z-index: 99;
  opacity: 1;
  border-radius: 20px;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(62%, transparent),
    color-stop(63.94%, rgba(0, 0, 0, 0.00345888)),
    color-stop(65.89%, rgba(0, 0, 0, 0.014204)),
    color-stop(67.83%, rgba(0, 0, 0, 0.0326639)),
    color-stop(69.78%, rgba(0, 0, 0, 0.0589645)),
    color-stop(71.72%, rgba(0, 0, 0, 0.0927099)),
    color-stop(73.67%, rgba(0, 0, 0, 0.132754)),
    color-stop(75.61%, rgba(0, 0, 0, 0.177076)),
    color-stop(77.56%, rgba(0, 0, 0, 0.222924)),
    color-stop(79.5%, rgba(0, 0, 0, 0.267246)),
    color-stop(81.44%, rgba(0, 0, 0, 0.30729)),
    color-stop(83.39%, rgba(0, 0, 0, 0.341035)),
    color-stop(85.33%, rgba(0, 0, 0, 0.367336)),
    color-stop(87.28%, rgba(0, 0, 0, 0.385796)),
    color-stop(89.22%, rgba(0, 0, 0, 0.396541)),
    color-stop(91.17%, rgba(0, 0, 0, 0.4))
  );
  background: linear-gradient(
    180deg,
    transparent 62%,
    rgba(0, 0, 0, 0.00345888) 63.94%,
    rgba(0, 0, 0, 0.014204) 65.89%,
    rgba(0, 0, 0, 0.0326639) 67.83%,
    rgba(0, 0, 0, 0.0589645) 69.78%,
    rgba(0, 0, 0, 0.0927099) 71.72%,
    rgba(0, 0, 0, 0.132754) 73.67%,
    rgba(0, 0, 0, 0.177076) 75.61%,
    rgba(0, 0, 0, 0.222924) 77.56%,
    rgba(0, 0, 0, 0.267246) 79.5%,
    rgba(0, 0, 0, 0.30729) 81.44%,
    rgba(0, 0, 0, 0.341035) 83.39%,
    rgba(0, 0, 0, 0.367336) 85.33%,
    rgba(0, 0, 0, 0.385796) 87.28%,
    rgba(0, 0, 0, 0.396541) 89.22%,
    rgba(0, 0, 0, 0.4) 91.17%
  );
}

// .sousuo {
//   padding: 0 60px;
//   margin-top: 30px;
// }
.getuser {
  height: 100%;
  .user {
    width: 552px;
    margin: 30px auto 0;
    // > img {
    //   border-radius: 50%;
    //   width: 90px;
    //   height: 90px;
    // }
    > span {
      display: block;
      margin: 20px 0 12px 0;
      font-size: 24px;
      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
      font-weight: 700;
      color: #000000;
    }
  }
  .yonghuxinxi {
    width: 100%;
    justify-content: space-around;
    .itme {
      > span {
        font-size: 14px;
        font-family: Source Han Sans CN-Bold, Source Han Sans CN;
        font-weight: 700;
        color: #000000;
        &:last-child {
          margin-left: 10px;
          font-weight: 400;
        }
      }
    }
  }
  .content {
    width: 500px;
    margin-top: 20px;
    text-align: center;
    > span {
      word-break: break-all;
      display: block;
      font-size: 14px;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      color: #9e9e9e;
    }
  }
}
.buttonList {
  width: 558px;
  margin: 0 auto;
  padding: 0 143px;
  margin-top: 20px;
  .guanzhu {
    width: 86px;
    height: 40px;
    background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    > span {
      font-size: 14px;
      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
      font-weight: 700;
      color: #ffffff;
    }
  }

  .quxiaoattention {
    cursor: pointer;
    width: 90px;
    height: 40px;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    border: 1px solid #ececec;
    background: transparent;
    > span {
      font-size: 14px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      color: #000000;
      font-weight: 400;
    }
    &:active {
      opacity: 0.7;
    }
  }

  .sixing {
    margin-left: 10px;
    width: 86px;
    height: 40px;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    border: 1px solid #ececec;
    > span {
      font-size: 14px;
      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
      font-weight: 700;
      color: #000;
    }
  }
  .feiji {
    margin-left: 10px;
    width: 40px;
    height: 40px;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    border: 1px solid #ececec;
  }
}
.list {
  width: 558px;
  margin: 0 auto;
  margin-top: 78px;
  position: relative;
  .listactice {
    border-bottom: 4px solid #64c8dc;
  }
  .listitem {
    padding-bottom: 20px;

    .spanact {
      color: #64c8dc;
    }
    > span {
      margin-left: 10px;
      font-size: 18px;
      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
      font-weight: 700;
      color: #000000;
    }
  }

  .listitem-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}
.boxlist {
  width: 100%;
  // border-bottom: 1px solid #ececec;
  margin-bottom: 20px;
}
</style>
